<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base/layout::header( ~{::title})">
    <title id="title">个人工时统计</title>
</head>

<body>
<div class="ui main container">
    <div th:replace="base/layout::message"/>

    <div class="ui clearing segment">

        <form action="" id="filterForm" class="ui padded center middle aligned grid form"
              th:object="${filter}" th:method="get">
            <div class="row">
                <div class="four wide column">
                    <div class="uSearch ui search">
                        <div class="ui icon input">
                            <input class="prompt" type="text" id="userKey" name="userKey" placeholder="人员"
                                   th:value="${filter.userKey}">
                            <input type="hidden" name="isSum" id="isSum" value="true">
                            <i class="search icon"></i>
                        </div>
                        <div class="results"></div>
                    </div>
                </div>

                <div class="fields" style="margin-top: 12px">
                    <div class="field">
                        <input type="text" placeholder="任务创建日期(From)" id="createDateFromStr" name="createDateFromStr"
                               th:value="${filter.createDateFromStr}"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss', maxDate:'#F{$dp.$D(\'createDateToStr\')}'})">
                    </div>
                    <div class="field">

                        <input type="text" placeholder="任务创建日期(To)" id="createDateToStr" name="createDateToStr"
                               th:value="${filter.createDateToStr}"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss', minDate:'#F{$dp.$D(\'createDateFromStr\')}'})">
                    </div>
                </div>
            </div>

            <div align="center">
                <div class="ui buttons">
                    <button class="ui red button" type="submit" style="margin-right: 30px"
                            th:href="@{/basicInfo/personal}">查询
                    </button>
                    <button class="ui white button" type="reset">重置
                    </button>
                </div>
            </div>

            <!--模态框-->
            <div class="ui small modal">
                <i class="close icon"></i>
                <div class="content">
                    确认导出列表？
                </div>
                <div class="actions">
                    <div class="ui cancel button">取消</div>
                    <div class="ui red approve button">确定</div>
                </div>
            </div>

        </form>
    </div>

    <table class="ui selectable celled table">
        <thead>
        <tr>
            <th colspan="14">
                <button class="ui red button"
                        type="button" onclick="confirmExport();">导出
                </button>
            </th>
        </tr>
        <tr>
            <th>人员</th>
            <th>总工时（小时）</th>
        </tr>
        </thead>
        <tbody th:if="${pageInfo}">
        <tr th:each="header : ${pageInfo.list}">
            <td><a href="#"
                   th:onclick="'queryPersonalDetail(\'' + ${header.userKey} + '\');'"
                   th:text="${header.userName}"></a></td>
            <td th:text="${header.timeWorked}"></td>
        </tr>
        </tbody>
    </table>
    <div th:include="base/datatable::pagination" th:remove="tag"></div>
</div>
<div th:replace="common/footer::footer"/>
</body>

<script type="application/javascript">

    $('.uSearch.ui.search')
        .search({
            apiSettings: {
                url: '/hades/autoComplete/userkey/{query}'
            },
            fields: {
                results: 'users',
                title: 'userKey',
                url: '',
                price: 'displayName'
            },
            minCharacters: 1,
            maxResults: 10,
            cache: true,
            error: {
                noResults: '啊噢，没有符合条件的结果哟~',
                serverError: '后台异常.'
            }
        })
    ;

    // 查找个人工时详情
    function queryPersonalDetail(userKey) {
        var isSum = $('#isSum').val();
        window.location.href = "/hades/basicInfo/personalDetail/" + userKey + "/" + isSum;
        window.event.returnValue = false;
    }

    // 导出确认框
    function confirmExport() {
        $('.ui.small.modal')
            .modal('show')
            .modal({
                closable: false,
                onApprove: function () {
                    var userKey = $('#userKey').val();
                    var createDateFromStr = $('#createDateFromStr').val();
                    var createDateToStr = $('#createDateToStr').val();

                    window.location.href = "/hades/basicInfo/personalExport?userKey=" + userKey
                        + "&createDateFromStr=" + createDateFromStr + "&createDateToStr="
                        + createDateToStr;
                }
            })
        ;
    }

</script>
</html>